<template>
  <el-dialog title="档号查缺" :visible.sync="leak.open" width="40%"  append-to-body
             :before-close="closeDelDialog">
    <el-form ref="leakForm" :rules="rules" :model="leakForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="档号规则" prop="ruleId">
            <el-select v-model="leakForm.ruleId" style="width: 90%;" @change="onChangeRule">
              <el-option v-for="dict in ruleOption" :key="dict.value" :label="dict.label" :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="display: flex;flex-wrap: wrap;margin: 0 0px 0 20px;">
        <ul class="rule-main" v-for="(item, index) in ruleArr" :key="index" style="display: flex;"
            v-show="leakForm.ruleId != undefined">
          <el-form-item :label="item.FIELD_CAPTION">
            <template v-if="item.SHOWTYPE == 5">
              <el-select v-model="leakForm[item.FIELD_NAME]" placeholder="请选择">
                <el-option v-for="i in dictList[item.FIELD_NAME]" :key="i.dictValue" :label="i.dictLabel" :value="i.dictValue">
                </el-option>
              </el-select>
            </template>
            <el-input v-else v-model="leakForm[item.FIELD_NAME]" placeholder="请输入"></el-input>
          </el-form-item>
        </ul>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="closeDelDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getCodeRule, roleDetailList} from "@/api/archive/archivesCategory";
import {getLastIndexOf} from "@/utils";
import {getRule, dhOfCheckForDefects} from "@/api/archive/fileCollection/fileOrganization";
import {getTypeObject} from '@/api/archive/dict/dictManageData'
export default {
  name: "leakFilling",
  props: ['leak'],
  data() {
    return {
      leakForm: {},
      rules: {
        ruleId: [
          { required: true, message: "请选择档号规则", trigger: "blur" },
        ],
      },
      ruleOption: [],
      subStr: '',
      ruleArr: [],
      categoryId: '',
      datype: '',
      dictList: [],
      // 档号最后一位长度
      length: 0
    }
  },
  methods: {
    init(val, data) {
      console.log(val, data)
      if(data != undefined) {
        this.folderId = data
      }
      this.categoryId = val.categoryId
      this.form = {
        categoryModelId: val.categoryId
      }
      getCodeRule(this.form).then(response => {
       this.ruleOption = response.rows.map(item => {
         return {
           value: item.id,
           label: item.name
         }
       })
      });
      if(val.sub_table_name != undefined) {
        this.subStr = getLastIndexOf(val.sub_table_name);
      }
    },
    onChangeRule() {
      // console.log(this.leakForm.ruleId)
      var type = ""
      if(this.subStr == 'V' || this.subStr == 'X') {
        if(this.folderId != undefined) {
          type = 'f'
          this.datype = '0'
        } else {
          type = 'v'
          this.datype = '1'
        }
      } else if (this.subStr == 'F') {
        type = 'f'
        this.datype = '0'
      }
      roleDetailList(type, this.leakForm.ruleId).then(response => {
        const arr = response.data.ziduanarr
        if(this.subStr == 'V' || this.subStr == 'X') {
          if(this.folderId != undefined) {
            this.length = response.data.jianbuling
          } else {
            this.length = response.data.bulingarr[response.data.bulingarr.length - 1]
          }
        } else if (this.subStr == 'F') {
          this.length = response.data.bulingarr[response.data.bulingarr.length - 1]
        }
        // console.log(response)
        this.form = {
          categoryId: this.categoryId,
          fieldName: arr.toString(),
          type: this.datype
        }
        this.ruleArr = []
        getRule(this.form).then(res=>{
          // console.log(res)
          this.ruleArr = res.data
          var headerlist = []
          for (let i = 0; i < this.ruleArr.length; i++) {
            if(this.ruleArr[i].SHOWTYPE == '5') {
              headerlist.push(this.ruleArr[i].FIELD_NAME)
            }
          }
          if (headerlist.length > 0) {
            getTypeObject(headerlist).then((res) => {
              this.dictList = res.data;
            })
          }
        })
      })
    },
    resetLeak() {
      this.leakForm = {
        ruleId: undefined,
        categoryId: undefined,
        datype: undefined
      }
    },
    closeDelDialog() {
      this.resetLeak()
      this.ruleArr = []
      this.folderId = undefined
      this.categoryId = undefined
      this.datype = undefined
      this.$emit("leakCancel");
      this.resetForm('leakForm')
    },
    submitForm() {
      this.$refs['leakForm'].validate(valid => {
        if(valid) {
          // 获取最后一项
          const lastItem = this.ruleArr[this.ruleArr.length - 1];
          for (let i = 0; i < this.ruleArr.length-1; i++) {
            if(this.leakForm[this.ruleArr[i].FIELD_NAME] == undefined) {
              this.$message.warning('除最后一项外都属于必填项');
              return;
            }
          }
          // 校验是否为数字
          if(this.leakForm[lastItem.FIELD_NAME] != undefined && this.leakForm[lastItem.FIELD_NAME] != '') {
            if(!/^\d+$/.test(this.leakForm[lastItem.FIELD_NAME]) || !(this.leakForm[lastItem.FIELD_NAME] > 0)) {
              this.$message.warning('最后一项必须为大于等于1的数字');
              return;
            }
            if(this.leakForm[lastItem.FIELD_NAME].length > this.length) {
              this.$message.warning('最后一项长度不能大于'+this.length+'位');
              return;
            }
          }
          this.leakForm.categoryId = this.categoryId
          this.leakForm.datype = this.datype
          if(this.folderId != undefined) {
            this.leakForm.folderId = this.folderId
            this.leakForm.datype = '0'
          }
          dhOfCheckForDefects(this.leakForm).then(response=>{
            this.$message.success(response.msg)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.rule-main,
.rule-main li {
  margin: 0;
  padding: 0;
}

.rule-main {
  width: 32%;
}

.rule-main li {
  // float: left;
  margin: 0 5.2% 0 0;
}
</style>
